<template>
  <div>
    <el-form :model="form" ref="form" label-width="60px">
      <el-form-item label="图层">
        <el-select v-model="type">
          <el-option
            label="商业街区（点数据）"
            value="xm_shoppoint"
          ></el-option>
          <el-option label="基本道路（线数据）" value="xm_lrdl"></el-option>
          <el-option label="周边建筑（面数据）" value="xm_building"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="type != 'xm_building'"
        label="名称"
        prop="name"
        :rules="[{ required: true, message: '名称不能为空' }]"
      >
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item
        v-if="type === 'xm_building'"
        label="楼层"
        prop="floor"
        :rules="[{ required: true, message: '楼层不能为空' }]"
      >
        <el-input v-model="form.floor" placeholder="请输入楼层"></el-input>
      </el-form-item>
      <el-form-item label="绘制">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="drawGeo"
          :disabled="!canDraw"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          @click="delGeo"
        ></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { drawType } from "../config/draw";

export default {
  props: ["map"],

  data() {
    return {
      draw: null,
      baseMap: null,
      source: null,
      feature: null,
      param: null,
      canDraw: true,
      type: "xm_shoppoint",
      form: {
        name: "",
        floor: "",
      },
    };
  },

  methods: {
    drawGeo() {
      // 初始处理
      this.canDraw = false;
      let layerGroup = this.baseMap.getAllLayers();
      layerGroup[8].setVisible(true);
      this.source = layerGroup[8].getSource();
      this.source.clear();
      this.$store.commit("updateDraw", true);

      // 画图
      let type =
        this.type === "xm_shoppoint"
          ? "Point"
          : this.type === "xm_lrdl"
          ? "MultiLineString"
          : "MultiPolygon";

      this.draw = drawType(this.source, type);
      this.baseMap.addInteraction(this.draw);
      this.draw.on("drawend", async () => {
        await this.baseMap.removeInteraction(this.draw);
        // 添加关键字来区分样式
        this.feature = this.source.getFeatures()[0];
      });
    },
    delGeo() {
      this.canDraw = true;
      this.source.clear();
    },
    // feature添加属性
    addParams() {
      if (this.form.name != "") {
        this.feature.set("name", this.form.name);
        return true;
      } else if (this.form.floor != "") {
        this.feature.set("floor", this.form.floor);
        return true;
      } else {
        return false;
      }
    },
  },

  watch: {
    map() {
      this.baseMap = this.map;
    },
  },
};
</script>

<style scoped>
</style>